$(function() {
   var scrollPane = $(".scroll-pane"), scrollContent = $(".scroll-content");
   var scrollBar = $(".scroll-bar").slider({
      slide: function(event, ui) {
         if (scrollContent.width() > scrollPane.width()) {
            scrollContent.css("margin-left", Math.round((ui.value / 100) * (
               scrollPane.width() - scrollContent.width())) + "px");
         }
         else {
            scrollContent.css("margin-left", 0);
         }
      }
   });

   var handleHelper = scrollbar.find(
   ".ui-slider-handle").mousedown(function() {
      scrollbar.width(handleHelper.width());
   }).mouseup(function() {
      scrollbar.width("100%");
   }).append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>").wrap(
   "<div class='ui-handle-helper-parent'></div>").parent();
   scrollPane.css("overflow", "hidden");




            
